<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
    <meta charset="UTF-8">
    <title>me-lazyload</title>
    <style>
        .title{
            text-align:center;
            font-size:28px;
            margin:40px 0 10px 0;
        }
        .container{
            width:102px;
            margin:0 auto;
            margin-top:40px;
        }
        .wrap{
            margin:5px 0;
            border:1px solid #ccc;
        }
        .wrap img{
            width:100px;
            height:100px;
        }

    </style>
</head>
<body ng-controller="mainCtrl">
<h2 class="title">me-lazyload</h2>
<div class="container">
    <div class="wrap" ng-repeat="img in images">
        <img src="360.png" lazy-src="{{img}}" alt="" animate-visible="true">
    </div>
</div>

<a href="https://github.com/jeremial/me-lazyload">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>

<script src="http://cdn.staticfile.org/angular.js/1.2.18/angular.min.js"></script>
<script src="me-lazyload.js"></script>
<script>
    angular.module('demo', ['me-lazyload'])
        .controller('mainCtrl', ['$scope', function($scope){
            var url = 'http://www.gravatar.com/avatar/6ca6c6611136a3e05ce30d872da1b551.jpg?s=100';
            var ary = [];
            for(var i = 0; i < 10; i++){
                ary.push(url + '&t=' + i + (+new Date()))
            }

            $scope.images = ary;
        }])
</script>
</body>
</html>